<template>
    <div class="home">
        <div class="left">
            <div class="banner">
                <img src="../assets/images/banner.png" alt="">
            </div>
            <div class="alarm-info">
                <div class="alarm content">
                    <div class="title">
                        <span>主要性能参数</span>
                    </div>
                    <div class="container huawen">
                        <table style="font-size: 0.75rem;">

                                <tr>
                                    <td>冷冻水送水温度</td>
                                    <td>7.0</td>
                                    <td>°C</td>
                                </tr>
                                <tr>
                                    <td>冷冻水回水温度</td>
                                    <td>11.2</td>
                                    <td>°C</td>
                                </tr>
                                <tr>
                                    <td>室外湿球温度</td>
                                    <td>24.0</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>制冷机房COP</td>
                                    <td>4.25</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>冷源COP</td>
                                    <td>5.68</td>
                                    <td></td>
                                </tr>

                        </table>
                    </div>
                </div>
                <div class="alarm content">
                    <div class="title">
                        <span>运行评价</span>
                    </div>
                    <div class="container">
                        <div id="radar" ></div>
                    </div>
                </div>
                <div class="alarm content">
                    <div class="title">
                        <span>告警与停机</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="right content">
            <div class="aside-content">
                <div class="title">
                    <!-- <i class="el-icon-s-tools"></i> -->
                    <span style="font-weight: 700;">当前设置</span>
                </div>
                <div class="setting-content">
                    <div class="setting-sm-tit title-color">冷冻水泵调节方式设置</div>
                    <div class="item-box">
                        <template>
                                <el-radio v-model="radio" :label="1">定供回水压差</el-radio>
                                <div class="set-value">
                                    <span class="set">设定值</span>
                                    <div class="input-box">
                                        <input type="text" id="set">
                                    <span class="unit">kPa</span>
                                    </div>
                                </div>
                                <el-radio v-model="radio" :label="2" label-position="left">定冷冻水系统阻力系数</el-radio>
                                <el-radio v-model="radio" :label="3">根据末端阀位调节</el-radio>
                                <el-radio v-model="radio" :label="4">根据末端回风温度调节</el-radio>
                                <el-radio v-model="radio" :label="5">根据室内环境温度调节</el-radio>
                        </template>
                    </div>

                </div>
                <div class="setting-content">
                    <div class="setting-sm-tit title-color">冷冻水出水温度设置方式</div>
                    <div class="item-box">
                        <template>
                                <el-radio v-model="radio2" :label="6">定冷冻水出水温度</el-radio>
                                <div class="set-value">
                                    <span class="set">设定值</span>
                                    <div class="input-box">
                                        <input type="text" id="set">
                                    <span class="unit"> ℃</span>
                                    </div>
                                </div>
                                <el-radio v-model="radio2" :label="7">冷冻水温度随外温变化</el-radio>
                                <div class="set-value">
                                    <span class="set">设定值</span>
                                    <div class="input-box">
                                        <input type="text" id="set">
                                    <span class="unit"> ℃</span>
                                    </div>
                                </div>
                                <el-radio v-model="radio2" :label="8" class="excellent">冷冻水温度技制冷机房<br>能耗最小寻优</el-radio>
                        </template>
                    </div>

                </div>
                <div class="set-btn" style="margin-left: 120px; margin-bottom: 10px;">
                    <button type="button" id="set-btn">设置</button>
                </div>
                <div class="start-box huawen" style="font-size: 0.75rem;">
                    <div class="start c_flex">
                        <div class="start-img" style="width: 80px; height: 80px;">
                            <img src="../assets/images/start green.png" alt="" srcset="">
                        </div>
                        <span>一键启停</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'HomeView',
  data () {
    return {
      radio: 1,
      radio2: 6,
      input1: '1150',
      input2: '1.5',
      input3: '5.7'
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('radar'))
    const option = {
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '节能指数', max: 100 },
          { name: '安全指数', max: 100 },
          { name: '功能指数', max: 100 }
        ],
        radius: 50, // 缩放
        center: ['50%', '60%'] // 位置
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          itemStyle: {
            color: 'red'
          },

          data: [
            {
              value: [40, 80, 80],
              name: '总评分',
              label: {
                show: true,

                color: '#fff',
                backgroundColor: '#0e5bd3b3',
                borderRadius: 3,
                padding: [3, 5],
                formatter: function (params) {
                  return params.value
                }
              }

            }
          ]
        }
      ]
    }
    // 绘制图表
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>

.title-color {
    color: #fff;
    font-family: "华文细黑", Arial, sans-serif;
    font-size: 0.75rem !important;
}

.el-radio {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-right: 48px;
    padding: 0.38rem 0;
    font-size: 0.75rem !important;
    color: #fff;
    font-family: "华文细黑", Arial, sans-serif;
}
.excellent {
    display: flex;
    align-items: flex-end;
}
.el-radio-button__inner,
.el-radio-group {
    display: block;

}

.el-radio__label {
    font-size: smaller;
    padding-left: 0px !important;
}
.el-cascader-node>.el-radio, .el-radio:last-child {
    margin-right: 48px;
}
.title {
    display: flex;
    align-items: center;
    // font-family: "微软雅黑", Arial, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    // margin-bottom: 0.5rem;
    color: #fff;
    margin-bottom: 7px;

    i {
        margin-right: 0.5rem !important;
    }
}

.home {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.4rem 0 0.4rem;
    box-sizing: border-box;
    color: #D0D2D6;
    height: calc(100vh - 50px);
    overflow: hidden;

    /* 隐藏滚动条 */

    .left {
        // border: 1px solid red;
        width: 78%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .banner {
            height: 70%;
            // border-bottom: 1px solid red;
            margin-bottom: .3rem;
            border-radius: 10px;
            overflow: hidden;
        }

        .alarm-info {
            display: flex;
            justify-content: space-between;
            height: 30%;
            padding: 0.75rem 0 0.4rem 0;

            .alarm {
                width: 33%;
                height: 100%;

                .container {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .right {
        // border: 1px solid red;
        // height: calc(100vh - 50px);
        .aside-content{
            // padding-right: 30px;
        }
        width: 21.5%;

        #set-btn{

            font-size: 0.75rem;
            font-family: "华文细黑", Arial, sans-serif;
            color: #283046;
            padding: 0 4px;

        }
        .set-value{
            display:flex;
            // justify-content: space-around;
            text-indent: 2em;
            height: 20px;
            font-size: 0.66rem !important;
            color: #fff;
            font-family: "华文细黑", Arial, sans-serif;
            .input-box{
                // width: 40%;
                // background-color: pink;
                margin-left:40px;
                .unit{
                    margin-left:8px;
                }
            }
            #set{
                width: 30px;
            }
        }
        .start-box {

            .start {
                margin-top: 40px;
                margin-left: 10px;

                i {
                    font-size: 5rem;
                    color: #018073;
                }
            }
        }
    }
}
</style>
<style lang="less">
.el-avatar,
.el-cascader-panel,
.el-radio,
.el-radio--medium.is-bordered .el-radio__label,
.el-radio__label {
    font-size: 0.75rem !important;
}

.el-radio__label {
    padding-left: 0px !important;
}

.el-radio__input.is-checked+.el-radio__label {
    color: #fff !important;
}
</style>
